<template>
  <div class="app-container approvePanl">
    <div class="top">
      <span class="title">{{ approve.name }}</span>
      <div class="header">
        <div class="tabs">
          <div
            v-for="(name, index) in tab"
            :key="index"
            class="tab"
            :class="{ 'active': index === active }"
            @click="tabChange(index)"
          >
            <span class="number">{{ index + 1 }}</span><span>{{ name }}</span>
          </div>
          <!-- <div class="tab active">
              <span class="number"></span>
              <span>流程设计</span>
            </div> -->
        </div>
      </div>
      <div class="right">
        <el-button size="small" type="info" @click="SaveConfig()">取消</el-button>
        <el-button size="small" type="success" :loading="saveLoading" @click="SaveConfig()">发布</el-button>
      </div>
    </div>
    <div class="content">
      <el-form v-if="active === 0" ref="mform" class="basic" :model="approve" :rules="approveRules" label-width="80px">
        <el-form-item label="流程编号" prop="nprocessId">
          <el-input v-model="approve.processId" placeholder="" disabled="disabled" />
        </el-form-item>
        <el-form-item label="流程名称" prop="processName" :error="error.processName">
          <el-input v-model="approve.processName" placeholder="请输入审批名称" />
        </el-form-item>
        <!-- <el-form-item label="流程分组" prop="processType" :error="error.processType">
            <el-select v-model="approve.processType" placeholder="请选择分组">
              <el-option v-for="item in groupData" :key="item.name" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item> -->
        <el-form-item label="字段表" prop="tableType" :error="error.tableType">
          <el-select v-model="approve.tableType" placeholder="请选择分组" multiple collapse-tags>
            <el-option v-for="item in tableTypeData" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="流程描述" prop="describe" :error="error.describe">
          <el-input v-model="approve.describe" type="textarea" placeholder="请输入审批描述" />
        </el-form-item>
        <el-form-item label="状态" required>
          <el-radio-group v-model="approve.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="2">关停</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="success" :loading="approveLoading" @click="NextInfo()">下一步</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单设计 formConf-->
      <!-- <designer v-show="active === 1" @changed="getwidget" :widgetList1="widgetList" :node="node"></designer>  -->
      <designer1 v-show="active === 1" :widget-list1="widgetList" :form-conf-old="approve.formConf" @changed="getwidget" @changedForm="getformConf" />
      <!-- <div class="vform-content" v-show="active === 1">
          <button @click="handleExport">导出 JSON</button>
            <v-form-designer ref="formDesigner"></v-form-designer>
        </div> -->
      <!--流程设计  -->
      <flowpath v-show="active === 2" :widget-list1="widgetList" :node1="node" @changed="getflowpath" />
      <!-- <flowpath @changed="getflowpath" :widgetList="widgetList"></flowpath> -->
    </div>
  </div>
</template>

<script>
// 载入表单设计组件
import designer from './componentDesigner/designer'
import designer1 from './build/index.vue'
// 载入流程设计组件
import flowpath from './componentFlowPath/flowpath1'
//
import { getSingleData, editProcessData, addProcessData } from '@/api/process'
import { formConf1 } from '@/utils/generator/config'
import { mapGetters } from 'vuex'
export default {
  name: 'ApproveConfigEdit',
  // designer,
  components: { flowpath, designer1 },
  data() {
    return {
      active: 0,
      // tab: ['基础设置', '表单设计', '流程设计', '高级设置'],
      tab: ['基础设置', '表单设计', '流程设计'],
      approve: {
        processId: 'process_' + Math.floor(Math.random() * 10000),
        processName: '',
        processType: null,
        describe: '',
        status: '1',
        formConf: formConf1,
        tableType: []
      },
      approveLoading: false,
      approveRules: {
        processName: [
          { required: true, message: '请输入审批名称', trigger: 'blur' },
          {
            min: 4,
            max: 20,
            message: '长度在 4 到 20 个字符',
            trigger: 'blur'
          }
        ],
        processType: [{ required: true, message: '请选择分组', trigger: 'change' }],
        tableType: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      error: {},
      saveLoading: false,
      widgetList: [],
      newWidgetList: [],
      node: {},
      newFormConf: {},
      groupData: [
        {
          name: '财务'
        },
        {
          name: '人力'
        },
        {
          name: '业务'
        }
      ],
      tableTypeData: [
        {
          name: '考勤表'
        },
        {
          name: '岗位聘任表'
        },
        {
          name: '基本信息表'
        },
        {
          name: '任职信息表'
        }

      ]

    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    widgetList: {
      handler(newval, oldval) {
        this.newWidgetList = newval
      }
    },
    'approve.formConf': {
      handler(newval, oldval) {
        this.newFormConf = newval
      }
    }
  },
  created() {
    const id = this.$route.query.Id // this.$route.params && this.$route.params.id
    this.processType = this.$route.query.type
    if (this.processType === 'edit') {
      this.editContent(id)
    }
  },
  methods: {
    // 导出json
    handleExport() {
      const formDesigner = this.$refs.formDesigner
      if (formDesigner && formDesigner.formData) {
        const jsonData = formDesigner.formData
        console.log('表单 JSON 数据:', jsonData)
      }
    },
    // 信息编辑数据获取
    editContent(Id) {
      getSingleData({ Id }).then(response => {
        this.approve = response.data
        this.approve.tableType = this.approve.tableType ? this.approve.tableType.split(',') : []
        this.widgetList = this.approve.formConf.fields ? this.approve.formConf.fields : []
        this.node = this.approve.nodeData ? this.approve.nodeData : {}
        this.formConf === this.approve.formConf ? this.approve.formConf : {}
        console.log('打印response.data', response.data)
      }).catch(err => {
        console.log(err)
      })
    },
    tabChange(index) {
      this.active = this.approve.processName ? index : 0
      if (this.approve.processName === '') {
        this.$message.warning('请将流程的基础信息填写完整！再进入下一步操作')
      }
    },

    // 下一步
    NextInfo() {
      const date = new Date() //
      const newDate = date.getFullYear() + '-' + date.getMonth() + 1 + '-' + date.getDate()
      this.approve.crateDate = this.approve.crateDate ? this.approve.crateDate : newDate
      this.approve.creator = this.approve.creator ? this.approve.creator : this.name
      this.$refs.mform.validate((valid) => {
        if (valid) {
          this.active = 1
          this.error = {}
          //  {
          //   'processId': this.approve.processId,
          //       'processId': this.approve.processId,
          //       'processName': this.approve.processName,
          //       'processType': this.approve.processType,
          //       'describe': this.approve.describe,
          //       'crateDate':newDate,
          //       'creator':this.approve.creator?this.approve.creator:this.name,
          //       'status':this.approve.status,
          //       'widgetList':this.approve.widgetList,
          //       'nodeData':this.approve.nodeData?this.approve.nodeData:{}
          //   }
          // if(this.approve.id!=null){
          //   editProcessData(this.approve).then(response => {
          //     if (response.code != 20000) {
          //         this.$message.error('进入下一步失败！')
          //     } else {
          //         this.$message.success('进入下一步！')
          //         this.active=1
          //         this.widgetList=this.approve.widgetList?this.approve.widgetList:[]
          //         this.node=this.approve.nodeData?this.approve.nodeData:{}
          //         this.approveLoading =false;
          //     }
          //   })
          // }else{
          //   addProcessData(this.approve).then(response => {
          //     // debugger
          //     if (response.code != 20000) {
          //         this.$message.error('进入下一步失败！')
          //     } else {
          //         this.$message.success('进入下一步！')
          //         this.active=1
          //         this.widgetList=this.approve.widgetList?this.approve.widgetList:[]
          //         this.node=this.approve.nodeData?this.approve.nodeData:{}
          //         this.approveLoading =false;
          //     }
          //   })
          // }

          // Test(this.approve)
          //   .then(() => {
          //     Message.success("操作成功");
          //   })
          //   .catch((res) => {
          //     if (res.data) {
          //       this.error = res.data;
          //     }
          //   })
          //   .finally(() => {
          //     this.approveLoading = false;
          //   });
        }
      })
    },
    getwidget(data) {
      this.widgetList = data
    },
    getformConf(data) {
      this.newFormConf = data
    },
    getflowpath(data) {
      this.node = data
    },
    SaveConfig() {
      // console.log('---------表单设计JSON----------')
      // console.log(JSON.stringify(this.widgetList))
      // console.log('---------流程设计JSON----------')
      // console.log(JSON.stringify(this.node))
      // alert('已打印到控制面板，请F12查看')
      // addProcessData
      // this.approve.widgetList=this.widgetList
      this.approve.nodeData = this.node
      this.approve.formConf = this.newFormConf
      if (this.approve.id !== null) {
        this.approve.tableType = this.approve.tableType ? this.approve.tableType.toString() : ''
        editProcessData(this.approve).then(response => {
          if (response.code !== 20000) {
            this.$message.error('编辑失败！')
          } else {
            this.$message.success('编辑成功！')
            this.active = 1
            this.approveLoading = false
          }
          console.log(response.data)
        })
      } else {
        addProcessData(this.approve).then(response => {
          if (response.code !== 20000) {
            this.$message.error('新增失败！')
          } else {
            this.$message.success('新增成功！')
            // this.active=1
            this.approveLoading = false
          }
          console.log(response.data)
        })
      }
    }
  }
}
</script>

  <style scoped lang="scss">
  .app-container {
    .top {
      z-index: 101;
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 54px;
      background: #fff;
      box-shadow: 0 1px 4px 0 rgba(17, 31, 44, 0.06);

      .title {
        display: inline-block;
        max-width: 240px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #111f2c;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 15px;
      }

      .header {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;

        .tabs {
          position: relative;
          display: inline-block;
          align-items: center;
          justify-content: center;

          .tab {
            position: relative;
            display: flex;
            padding: 16px 16px;
            text-decoration: none;
            font-size: 14px;
            color: rgba(17, 31, 44, 0.56);
            cursor: pointer;
            float: left;
            .number {
              display: inline-block;
              color: #979797;
              background: #fff;
              border: 1px solid #979797;
              width: 14px;
              height: 14px;
              line-height: 14px;
              font-size: 12px;
              margin-right: 6px;
              border-radius: 50%;
            }
          }

          .tab.active {
            color: #8bc349;

            .number {
              font-weight: normal;
              color: #fff;
              background: #8bc349;
              border: 1px solid #8bc349;
            }
          }
        }
      }

      .right {
        position: absolute;
        right: 10px;
      }
    }

    .content {
      width: 100%;
      // padding-top: 54px;
      background: #f5f5f7;
      overflow: auto;

      .basic {
        width: 400px;
        padding: 30px;

        ::v-deep .el-select {
          display: block;
        }
      }
    }
  }
  body {
    margin: 0 !important;
    /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
  }

  ::v-deep .vform-content {
        position: relative;
    //   top: 60px;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        // padding:0 30px;
        overflow-x: hidden;
        overflow-y: auto;
        .main-container{
            padding-top: 0 !important;
            margin-left: 0px!important;
            .main-header{
              display: none;
            }
            .toolbar-container .left-toolbar {
              button:last-child{
                display: none;
              }
              .el-button-group button:nth-child(n+2){
                display: none;
              }
            }
        }
  }
  </style>
  <style lang="scss">
  /*防止样式污染*/
  .approvePanl {
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #ccc;
    }

    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #f5f5f5;
    }
  }

  </style>
